import 'bootstrap/dist/css/bootstrap.css'
import "./index.scss";
import Count from "../count/index";
function Item({
  goods_count,
goods_id,
goods_img,
goods_name,
goods_price,
goods_state,
changeSel
}) {
  return (
    <div className="my-goods-item">
       {/* 商品列表项 */}
    <div className="left">
      <div className="custom-control custom-checkbox">
        <input
          type="checkbox"
          className="custom-control-input"
          checked={goods_state}
          onChange={(event)=>{
            console.log(event.target.checked);
            // 修改当前商品选中状态
            changeSel(goods_id,event.target.checked)
          }}
          id={`input-${goods_id}`}
        />
        <label className="custom-control-label" htmlFor={`input-${goods_id}`}>
          <img
            src={goods_img}
            alt=""
          />
        </label>
      </div>
    </div>
    <div className="right">
      <div className="top">{goods_name}</div>
      <div className="bottom">
        <span className="price">¥ {goods_price}</span>
        <span>
          {/* counter组件 */}
            <Count goods_id={goods_id} goods_count={goods_count}></Count>
        </span>
      </div>
    </div>
  </div>
  )
}

export default Item
